<!-- 11.10 数据联动列表 -->
<template>
	<app-layout>
		<!-- 分类视频 -->
		<!-- <view class="gold-video" v-if="video_url!=''">
			<video autoplay loop muted :show-fullscreen-btn="false" :show-play-btn="false" :show-center-play-btn="false"
				:enable-progress-gesture="false" class="video" :src="video_url" :controls="false"></video>
		</view> -->
		<view class="gold-video" v-if="live_src!=''" @click="jump(live_url)">
			<image class="image" :src="live_src" mode="widthFix"></image>
		</view>
		<view class="index-nav" v-if="nav_list.length > 0">
			<view class="app-index-nav dir-left-nowrap cross-center">
				<scroll-view scroll-x class="app-scroll" :scroll-into-view="'clasfy'+cureid" scroll-with-animation>
					<view class="cross-center">
						<view class="app-item" :id="'clasfy'+index" v-for="(item,index) in nav_list" :key="item.id"
							:class="index == cureid ? 'active':''" @click="switc(index)">
							{{item.name}}
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- <view class="cate"> -->
		<scroll-view :style="{top:live_src!=''?'555rpx' : '105rpx'}" class="cate" @scroll="scroll" scroll-y="true"
			:scroll-into-view="'cate-'+cure" scroll-with-animation v-if="nav_list.length > 0">
			<view v-for="(item,index) in nav_list" :key="index" :id="'cate-'+index">
				<view class="cate-title">
					<text>{{item.name}}</text>
				</view>
				<view class="list-one" v-if="index % 2 == 0">
					<view class="list-one-item" v-for="(child,childindex) in item.childgoodlist" :key="childindex"
						@click="routeGo(child,item.id)">
						<image class="image" :src="child.cover_pic" mode=""></image>
						<text class="u-line-2">{{child.name}}</text>
					</view>
				</view>
				<view class="list-two" v-else>
					<view class="list-two-item" v-for="(child,childindex) in item.childgoodlist" :key="childindex"
						@click="routeGo(child,item.id)">
						<image class="image" :src="child.cover_pic" mode=""></image>
						<text class="list-two-title u-line-5">{{child.name}}</text>
					</view>
				</view>
				<view class="nowmoew" @click="morelist(item.id,item.name,index)" v-if="item.childgoodlist.length>0">
					查看更多>>>
				</view>
				<view class="app-no-goods" v-else>
					<app-no-goods background="#fff"></app-no-goods>
				</view>
			</view>
			<view style="height: 36rpx;"></view>
		</scroll-view>
		<view class="app-no-goods" v-else>
			<app-no-goods :background="nav_list.length > 0 ? '#fff' : '#f7f7f7'"></app-no-goods>
		</view>
		<!-- </view> -->
	</app-layout>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import appNoGoods from '../../components/page-component/app-no-goods/app-no-goods.vue';
	const base64 = require('../../utils/base64.js');
	let mallurl = null
	export default {
		components: {
			appNoGoods
		},
		data() {
			return {
				// 标题
				title: '',
				noGoods: false,
				available: false,
				// 商品分类
				nav_list: [],

				cat_id: 0,
				// 11.8
				cure: 0,
				cureid: 0,
				ltop: 0,
				alltop: [],

				mall_id: 1,
				video_url: '',
				live_url: '',
				live_src: '',
			}
		},
		computed: {
			...mapState({
				storemall: state => state.malid.apimaUrl
			}),
		},
		onReady() {
			if (this.title != '') {
				uni.setNavigationBarTitle({
					title: this.title,
				});
			}
		},
		onLoad(options) {
			// 9.18
			if (options.available) {
				this.available = options.available
				// this.goldnum()
			}
			this.mall_id = options.mall_id || 1
			mallurl = this.$siteInfo.apiroot + '?_mall_id=' + this.mall_id + '&r='
			if (this.mall_id > 1) {
				// this.$store.dispatch('malid/actionSetMallId', this.mall_id)
			}
			// if (options.cat_id > 0) {

			// } else {
			// 	this.cat_id = 0
			// }
			this.cat_id = options.cat_id || 0
			this.requestCats(this.cat_id)
			if (this.cat_id > 0) {
				this.loadCatDetail(this.cat_id)
			}
			this.title = options.title || '';
			uni.showShareMenu({
				menus: ['shareAppMessage', 'shareTimeline']
			})
		},
		methods: {
			jump(item) {
				let url = item
				if (url == '' || url == 'javascript:;' || url == '/') {
					return
				}
				if (item.indexOf('/pages/gospeed/index') != -1 || item == '/pages/index/index' || item ==
					'/pages/sixty/index' || item == '/pages/user-center/user-center' || item == '/pages/store/mine/mine') {
					uni.reLaunch({
						url: url
					})
					return
				}
				uni.navigateTo({
					url: url
				})
			},
			morelist(id, name, index) {
				let url = '/pages/goods/catslist?cat_id=' + id + '&title=' + name + '&numid=' + index + '&mall_id=' + this
					.mall_id
				// if (this.available) {
				// 	url = url + '&available=true'
				// }
				uni.navigateTo({
					url: url
				})
			},
			switc(index) {
				this.cure = index
				this.cureid = index
			},
			scroll(e) {
				let scrollTop = e.detail.scrollTop
				for (let i = 0; i < this.nav_list.length; i++) {
					if (this.nav_list[i].top <= scrollTop && scrollTop < this.nav_list[i].bottom) {
						this.cureid = i
					}
				}
			},
			calcSize() {
				let top = 0
				let tem = 0
				let bottom = 0
				for (let i = 0; i < this.nav_list.length; i++) {
					let view = uni.createSelectorQuery().in(this).select("#cate-" + i);
					view.boundingClientRect(res => {
						top = tem
						bottom = tem + res.height;
						this.nav_list[i].top = top
						this.nav_list[i].bottom = bottom
						tem = bottom
					}).exec();
				}
			},
			routeGo(e, cat_id) {
				uni.navigateTo({
					url: e.page_url + '&title=' + e.name + '&cat_id=' + cat_id
				});
			},
			// 分类列表请求
			requestCats(cat_id) {
				let url = this.$api.default.cat_list
				if (this.mall_id == 1) {
					url = this.$api.default.cat_list
				} else {
					url = mallurl + this.$apiUrl.default.cat_list
					// url = this.storemall.default.cat_list
				}
				this.$request({
					url: url,
					data: {
						cat_id: cat_id,
						limit: 4
					},
				}).then(res => {
					if (res.code === 0) {
						this.nav_list = res.data.list
						this.$nextTick(() => {
							this.calcSize();
						})
					}
				});
			},
			loadCatDetail(cat_id) {
				let url = this.$api.default.cat_detail
				if (this.mall_id == 1) {
					url = this.$api.default.cat_detail
				} else {
					// url = this.storemall.default.cat_detail
					url = mallurl + this.$apiUrl.default.cat_detail
				}
				this.$request({
					url: url,
					data: {
						cat_id: cat_id
					},
				}).then(res => {
					// this.video_url = res.data.detail.advert_params.video_url
					if (res.data.detail.params && res.data.detail.params.live_url) {
						this.live_url = res.data.detail.params.live_url
					}
					if (this.live_url != '') {
						this.checkPlink(this.live_url)
					}
				});
			},
			checkPlink(url) {
				if (url == '' || url == 'javascript:;' || url == '/') {
					return
				}
				let curl = base64.encode(url)
				this.$request({
					url: this.$api.entity.pagelink,
					data: {
						pageurl: curl
					}
				}).then(res => {
					this.live_src = res.data.cover_img
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.gold-video {
		width: 100%;
		// height: 450rpx;

		.image {
			width: 100%;
			// height: 586rpx;
			// height: 450rpx;
		}

		.video {
			width: 100%;
			height: 450rpx;
		}
	}

	.live-iage {
		width: 100%;

		.image {
			width: 100%;
		}
	}

	.list-one {
		width: 720rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;

		.list-one-item {
			width: 350rpx;
			height: 460rpx;
			font-size: 28rpx;

			.image {
				width: 350rpx;
				height: 350rpx;
			}
		}
	}

	.list-two {
		width: 100%;

		.list-two-item {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin: 0 auto;
			width: 720rpx;
			height: 240rpx;
			font-size: 28rpx;

			&+.list-two-item {
				margin-top: 24rpx;
			}

			.image {
				width: 240rpx;
				height: 240rpx;
			}

			.list-two-title {
				flex: 1;
				margin-left: 36rpx;
				text-align: justify;
				margin-right: 24rpx;
			}
		}
	}

	.nowmoew {
		text-align: center;
		line-height: 100rpx;
		font-size: 28rpx;
		font-weight: 700;
		color: #446DFD;
	}

	.cate {
		position: absolute;
		top: 105rpx;
		bottom: 0;
		background: #fff;
		width: 100%;
		display: flex;
	}

	.cate-title {
		// text-align: center;
		font-size: 32rpx;
		// margin-top: 20rpx;
		line-height: 80rpx;
		position: relative;
		font-weight: 600;
	}

	.cate-title .line {
		position: absolute;
		height: 2rpx;
		width: 300rpx;
		background: #f4f4f4;
		top: 39rpx;
		left: 50%;
		margin-left: -150rpx;
	}

	.cate-title text {
		background: #fff;
		padding: 0 10px;
		position: relative;
		// color: #999;
	}

	.cate-list {
		height: auto;
		overflow: hidden;
	}

	.cate-item {
		width: 33.33%;
		float: left;
		margin-top: 20rpx;
	}

	.cate-item image {
		width: 160rpx;
		height: 160rpx;
		display: block;
		margin: 0 auto;
	}

	.cate-item text {
		display: block;
		text-align: center;
		font-size: 24rpx;
	}

	// 分类
	.index-nav {
		width: #{750rpx};
		height: #{100rpx};
		padding: 24rpx 0;
		background: #fff;
	}

	.app-index-nav {
		height: #{80rpx};
		width: #{750rpx};

		.app-scroll {
			height: #{80rpx};
			white-space: nowrap;

			.app-item {
				display: inline-block;
				font-size: #{28rpx};
				text-align: center;
				color: #353535;
				padding: 0 #{20rpx};
				line-height: #{56rpx};
				position: relative;
				background-color: #e5e5e5;
				border-radius: 36rpx;
				margin-left: 36rpx;

				&.active {
					background-color: #d3ddfd;
					color: #446DFD;
				}
			}
		}
	}

	.app-no-goods {
		width: 100%;
	}
</style>
